<template>
	<view>
		<!-- 头部内容区 -->
			<view class="card acea-row row-column">
				<view class="top acea-row col_ff row-between">
					<text class="font28">可提现的金额(元)</text>
					<view class="font24">提现明细<image src="../../static/images/user/rightarrow.png" mode=""></image>
					</view>
				</view>
				<view class="bottom  col_ff">
					￥<text class="font60 font-w600">9,200.00</text>
				</view>
			<view class="info acea-row row-column row-between">
				<view class="">提现金额</view>
				<view class="acea-row row-between cash_line row-middle">
					<view class="font60 mr10">￥</view>
					<input type="number" v-model="cash_num" class="cash_ipt"
						@input="bindCode(cash_num)" placeholder="请输入提现金额" maxlength="15"></input>
					<text class="font24 red">全部提现</text>
				</view>
				<view class="bottom acea-row row-between">
				<view class="left">提现至</view>
				<view class="right acea-row row-middle" @click="isWeixin=!isWeixin">
					<view class="acea-row font26 row-middle">
						<image class="icon" src="@/static/images/user/chat.png" mode="aspectFill" v-if="isWeixin"></image>
						<image class="icon" src="@/../static/images/user/alipay.png" mode="aspectFill" v-else></image>
						{{isWeixin?'微信':'支付宝'}}
					</view>
				    <image src="../../static/images/user/right_arrow.png" mode="aspectFill" class="arrow"></image>
				</view>
				</view>
			</view>
		</view>
		<view class="btn">立即提现</view>
	</view>
</template>

<script>
	import tabBar from "@/components/tabBar";
	import {
		mapGetters
	} from "vuex";
	import {
		toLogin
	} from '@/libs/login.js';
	export default {
		components: {
			tabBar,
		},
		data() {
			return {
				statusBarHeight: 0,
				activeIdx: 0,
				surplus: 0,
				cash_num: "",
				isWeixin: true
			}
		},
		computed: {
			...mapGetters(['isLogin']),
		},
		onLoad() {},
		methods: {
			bindCode(e) {
				this.cash_num = e
			},
			change(num) {
				this.activeIdx = num;
			},
			toPage(type) {
				let url = '';
				if (type == 1) url = '/pages/aboutUsers/index';
				wx.navigateTo({
					url
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f7f8fa;
	}
	.col_ff {
		color: #fff;
	}

	.col_00 {
		color: #000;
	}

	.col_38 {
		color: #383838;
	}

	.red {
		color: #EE212D;
	}

	.gary {
		color: #A6A6A6;
	}

	.font22 {
		font-size: 22rpx;
	}

	.font32 {
		font-size: 32rpx;
	}

	.font36 {
		font-size: 36rpx;
	}

	.font60 {
		font-size: 60rpx;
	}

	.col_999 {
		color: #999;
	}
    .font-w600 {
		font-weight: 600;
	}
	.mr10 {
		margin-right: 10rpx;
	}
	.card {
		position: relative;
		padding: 60rpx 34rpx 0;
		height: 415rpx;
		width: 100%;
		background: #EE212D;
		.top {
			margin-bottom: 15rpx;
			image {
				width: 12rpx;
				height: 20rpx;
				margin-left: 10rpx;
			}
		}
	}
	.info {
		position: absolute;
		background-color: #fff;
		bottom: -130rpx;
		width: 690rpx;
		height: 317rpx;
		border-radius: 10rpx;
		box-sizing: border-box;
		padding: 26rpx 32rpx 47rpx;
		
		.bottom {
			.icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 8rpx;
			}
			.arrow {
				width: 15rpx;
				height: 25rpx;
				margin-left: 20rpx;
			}
		}
	}
	.cash_line {
		height: 70rpx;
		border-bottom: 2rpx solid #eee;
		padding-bottom: 5rpx;
	}
	.cash_ipt {
		flex: 1;
		font-size: 38rpx;
		color: #333;
		padding-left: 10rpx;
	}
	.btn {
		width: 692rpx;
		height: 85rpx;
		line-height: 85rpx;
		text-align: center;
		color: #fff;
		margin: 184rpx auto 0;
		border-radius: 5px;
		background: #EE212D;
	}
</style>
